<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>意见详情</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <div class="item">
        <span>反馈用户</span>
        <span>
          <el-button type="text" @click="goUserInfo(info)">{{info.nickName || info.userName}}</el-button>
        </span>
      </div>

      <div class="item">
        <span>反馈类型</span>
        <span>{{info.feedBackType | filterFeedBackType}}</span>
      </div>

      <div class="item">
        <span>手机/邮箱/QQ</span>
        <span>{{info.feedBackChannel}}</span>
      </div>

      <div class="item">
        <span>提交时间</span>
        <span>{{info.createTime}}</span>
      </div>

      <div class="item">
        <span>{{info.feedBackType === 1?'反馈标题':'顾问名称'}}</span>
        <span>{{info.feedBackTitle}}</span>
      </div>

      <div v-if="info.feedBackType === 1" class="item">
        <span>反馈信息</span>
        <span>{{info.feedBackContent}}</span>
      </div>

      <div v-if="info.feedBackType === 1" class="item">
        <span>相关图片</span>
        <span>
          <el-image
            class="image"
            fit="cover"
            v-for="(item,index) in feedBackImgs"
            :key="index"
            :src="item"
            :preview-src-list="feedBackImgs"
          ></el-image>
        </span>
      </div>

      <div v-if="info.readStatus === 2" class="item">
        <span>操作</span>
        <span>
          <el-button @click="changeStatus" type="primary" size="mini">已处理</el-button>
        </span>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getFeedback, updateFeedback } from "@/api/system/feedback";
export default {
  name: "NoticeEdit",
  data() {
    return {
      info: {}
    };
  },
  computed: {
    feedBackImgs() {
      return this.info.feedBackImgs ? this.info.feedBackImgs.split(",") : [];
    }
  },
  filters: {
    filterFeedBackType(value) {
      return {
        1: "意见反馈",
        2: "顾问咨询"
      }[value];
    }
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    getEditInfo() {
      const id = this.$route.query.id;
      console.log(id);
      if (id) {
        getFeedback(id).then(response => {
          console.log(response);
          this.info = response.data;
        });
      }
    },
    goUserInfo(item) {
      this.$router.push({
        name: "UserDetail",
        query: {
          id: item.userId
        }
      });
    },
    changeStatus() {
      updateFeedback({
        ...this.info,
        readStatus: 1
      }).then(res => {
        this.msgSuccess("处理成功");
        this.$router.go(-1);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.item {
  font-size: 14px;
  padding: 18px 0;
  span:first-child {
    width: 100px;
    display: inline-block;
    text-align: right;
  }
  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }
  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
</style>
